<template>
    <!-- <div style="display: flex; align-items: center"> -->
      <el-popover placement="bottom" :width="450" trigger="click">
        <template #reference>
          <el-button class="message-button">消息</el-button>
        </template>
        <el-table :data="gridData">
          <el-table-column width="270" property="contract" label="合同消息" />
          <!-- <el-table-column width="100" property="name" label="name" /> -->
          <el-table-column width="150" property="date" label="日期" />
        </el-table>
      </el-popover>
  
    <!-- </div> -->
  </template>
  
  <script lang="ts" setup>
  const gridData = [
    {
      date: '2016-05-02',
      contract:'您有一条新的消息',
    },
    {
      date: '2016-05-04',
      contract:'您有一条新的消息',
    },
    {
      date: '2016-05-01',
      contract:'您有一条新的消息',
    },
    {
      date: '2016-05-03',
      contract:'您有一条新的消息',
    },
  ]
  </script>
  <style>
  .message-button {
    float: right;
    margin-right: 30px;
    margin-top: -50px;
    background-color: rgb(235, 232, 232,0.9);
  }
</style>